Incorrect Naming

function welcomeMessage() {
  return <h2>Welcome</h2>;
}

Using a lowercase component name can cause JSX to treat it as a built-in element instead of the intended custom component.

11. Rule 9: Use Parentheses for Multiline JSX

When a component returns JSX across multiple lines, wrap the JSX expression in parentheses for clarity and to avoid JavaScript automatic semicolon insertion problems after the return statement.

Recommended Syntax

function App() {
  return (
    <div>
      <h1>React Training</h1>
      <p>Learn JSX step by step.</p>
    </div>
  );
}
export default App;

Common Mistake

function App() {
  return
    <h1>Hello React</h1>;
}

Problem: JavaScript may treat the line break after return as the end of the statement, causing the function to return undefined.

Correct: Put the JSX on the same line as return, or wrap the multiline expression in parentheses immediately after return.

12. Rule 10: Use Conditional Expressions Correctly

Conditional rendering displays different UI content based on a condition. You can use a ternary expression or logical AND operator inside JSX.

Example Using the Ternary Operator

function App() {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn
        ? <h2>Welcome Back!</h2>
        : <h2>Please Log In</h2>}
    </div>
  );
}
export default App;

Example Using Logical AND

function App() {
  const hasNotification = true;
  return (
    <div>
      {hasNotification && <p>You have a new notification.</p>}
    </div>
  );
}
export default App;

Tip: Avoid using a number directly on the left side of && when you do not want it displayed. For example, {0 &&

Hello

13. Rule 11: Use Keys When Rendering Lists

When rendering multiple elements from an array using map(), provide a stable and unique key for each sibling element. Keys help React identify which items have changed, been added, or been removed.

Example

function App() {
  const courses = [
    { id: 1, name: "HTML" },
    { id: 2, name: "CSS" },
    { id: 3, name: "React JS" }
  ];

  return (
    <ul>
      {courses.map((course) => (
        <li key={course.id}>{course.name}</li>
      ))}
    </ul>
  );
}
export default App;

Explanation:

• map() creates a list item for each course.
• key={course.id} provides a stable identifier.
• Keys should be unique among siblings and should remain stable across renders.

Avoid generating a new random key during every render. Array indexes should generally be avoided as keys when items may be reordered, inserted, or removed.

14. Rule 12: Use Correct JSX Style Syntax

The JSX style property accepts a JavaScript object rather than a CSS string. Most CSS property names use camelCase, and values generally use strings or numbers as appropriate.

Incorrect Example

<h1 style="color: blue; font-size: 30px;">
  Hello React
</h1>

Correct Example

function App() {
  return (
    <h1 style={{ color: "blue", fontSize: "30px" }}>
      Hello React
    </h1>
  );
}
export default App;

The outer curly braces introduce a JavaScript expression, while the inner braces define the style object.

Using a Separate Style Object

function App() {
  const headingStyle = {
    color: "blue",
    backgroundColor: "lightgray",
    padding: "10px"
  };

  return <h1 style={headingStyle}>Hello React</h1>;
}
export default App;

15. Rule 13: Handle Events Using JSX Event Props

React event handlers use props such as onClick, onChange, and onSubmit. Pass a function reference when you want React to call the function after an event occurs.

Correct Example

function App() {
  function handleClick() {
    alert("Button clicked!");
  }

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}
export default App;

Passing Arguments to an Event Handler

function App() {
  function greet(name) {
    alert("Hello, " + name);
  }

  return (
    <button onClick={() => greet("Rahul")}>
      Greet
    </button>
  );
}
export default App;

Remember: onClick={handleClick} passes the function. onClick={handleClick()} calls it during rendering, which is usually not what you want for an event handler.

16. Rule 14: Keep JSX Nesting Clear and Readable

Correct indentation and manageable component sizes make JSX easier to understand and maintain.

Less Readable Example

function App(){return <div><h1>Hello</h1><p>Welcome</p></div>;}

Recommended Example

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <p>Welcome</p>
    </div>
  );
}
export default App;

Use consistent indentation, meaningful component names, and separate components when a UI section becomes too complex.

17. JSX Syntax Rules Summary

No.	Rule	Example
1	Return one root element.	... or <>...
2	Close every tag.
3	Use className for CSS classes.	className="title"
4	Use camelCase for most JSX properties.	onClick={handleClick}
5	Use curly braces for expressions.	{name}
6	Use quotes for literal strings.	alt="Profile photo"
7	Match opening and closing tags.	Hello
8	Capitalize custom component names.
9	Use parentheses for multiline JSX.	return ( ... );
10	Use expressions for conditional UI.	{isLoggedIn ? "Welcome" : "Login"}
11	Provide stable keys for list items.	key={item.id}
12	Use an object for inline styles.	style={{ color: "blue" }}
13	Pass functions to event props.	onClick={handleClick}
14	Keep markup readable.	Indent nested elements consistently.

18. Common JSX Errors and Solutions

19. Practical Example: Student Information Card

This example combines several JSX rules, including a single root element, correctly closed tags, curly braces, camelCase properties, conditional rendering, and inline styles.

function StudentCard() {
  const student = {
    name: "Amit Sharma",
    course: "React JS",
    enrolled: true
  };

  const cardStyle = {
    border: "1px solid #ccc",
    borderRadius: "8px",
    padding: "16px",
    maxWidth: "320px"
  };

  return (
    <div className="student-card" style={cardStyle}>
      <h2>{student.name}</h2>
      <p>Course: {student.course}</p>
      <p>
        Status: {student.enrolled ? "Enrolled" : "Not Enrolled"}
      </p>
      <button onClick={() => alert(student.name)}>
        View Student
      </button>
    </div>
  );
}
export default StudentCard;

Concepts Used

• A single root element: div.
• Properly closed JSX tags.
• className for CSS styling.
• Curly braces for JavaScript expressions.
• Conditional rendering with a ternary expression.
• A style object for inline CSS.
• An event handler for button clicks.

Practice Tasks

1. Change the student's name and course.
2. Add a student ID and display it using curly braces.
3. Display a different message when enrolled is false.
4. Add an image with a proper alt attribute.
5. Create a list of three students using map() and stable keys.
6. Move the styling into an external CSS file.

20. JSX Syntax and Rules – Interview Questions and Answers

Q1. What is JSX?

JSX is a JavaScript syntax extension that allows developers to write HTML-like markup inside JavaScript code, especially in React components.

Q2. Is JSX the same as HTML?

No. JSX resembles HTML but has stricter syntax and uses React-specific conventions for many attributes and expressions.

Q3. Why must JSX have a single root element?

A component must return a single JSX expression. Multiple sibling elements can be grouped inside a parent element or a Fragment.

Q4. Why do JSX tags need to be closed?

JSX requires explicit closing tags or self-closing syntax to define an unambiguous element structure.

Q5. Why is className used instead of class?

className is the JSX property used to assign CSS classes to React DOM elements.

Q6. What are curly braces used for in JSX?

They embed JavaScript expressions, such as variables, calculations, object properties, and function calls that return values.

Q7. What is a Fragment?

A Fragment groups JSX elements without adding an extra DOM element.

Q8. Why do React component names start with a capital letter?

Uppercase names distinguish custom React components from lowercase built-in HTML elements in JSX.

Q9. How are styles applied in JSX?

Styles can be applied using CSS classes, stylesheets, CSS modules, styling libraries, or inline style objects.

Q10. What is the purpose of the key property?

The key helps React identify list items between renders and should be stable and unique among sibling elements.

Q11. Can we use JavaScript if statements directly inside JSX braces?

No. JSX braces accept expressions, not standalone statements. Prepare conditional values before the return or use ternary expressions and logical operators.

Q12. Does the browser understand JSX directly?

No. JSX is transformed into JavaScript by a build tool or compatible transformation process before the browser executes it.

21. Quick Revision Checklist

• Understand JSX syntax and its purpose.
• Return one root element or use a Fragment.
• Close all JSX tags.
• Use className instead of class.
• Use camelCase for most JSX properties.
• Use curly braces for JavaScript expressions.
• Use quotes for literal string attributes.
• Use uppercase names for custom React components.
• Use parentheses to format multiline JSX returns.
• Write conditional rendering expressions correctly.
• Use stable keys when rendering lists.
• Use JavaScript objects for inline styles.
• Pass event handler functions correctly.
• Debug syntax errors using terminal and browser console messages.

22. Conclusion

JSX syntax and rules are fundamental to React development. Understanding root elements, closing tags, attributes, curly braces, component naming, event handling, conditional rendering, list keys, and inline styles helps developers build valid and maintainable React interfaces.

Practise these rules by creating small components and fixing common JSX errors before moving on to advanced React concepts such as props, state, Hooks, forms, API integration, and routing.

Explore React JS Training: JustAcademy React JS Training Course

Register for a Course Demo: Register for React JS Course Demo

Official Learning Resource: React – Writing Markup with JSX